<template>
	<view class="set-box" v-if="info">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="展示设置" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="top-title">
			搜索设置
		</view>
		
		<view class="baibox">
			<view class="baili">
				<view class="zhan">
					可被用户搜索
					<view class="bnt">
						您的标签会被匹配推送给相同选择的用户
					</view>
				</view>
				<u-switch v-model="userInfo.sel_nick" :inactiveValue="1"
					:activeValue="0" inactiveColor="#888EB6" size="20" activeColor="#45C4B0"
					@change="change('sel_nick')"></u-switch>
			</view>
			<view class="baili" @click="showFee=true">
				<view class="left">
					<view class="title">
						展示价格
						<span>*</span>
					</view>
				</view>
				<view class="cenbox">
					<scroll-view scroll-x="true" class="qianbox" style="font-size: 12px;color:#999;">
						{{info.min_price || '0.00'}}-{{info.max_price || '0.00'}} 币 / {{info.word_count}}
					</scroll-view>
				</view>
				<image :src="'/images/rarr.png' | formatImgUrl" class="rarr" mode=""></image>
			</view>
			
			<!-- <view class="baili" @click="setdata(0)">
				<view class="left">
					<view class="title">
						价格设置
					</view>
				</view>
				<view class="cenbox">
					<scroll-view scroll-x="true" class="qianbox" style="font-size: 12px;color:#999;">
						{{info.word_price?info.word_price:'0.00'}} 元
					</scroll-view>
				</view>
				<image :src="'/images/rarr.png' | formatImgUrl" class="rarr" mode=""></image>
			</view>
			
			<view class="baili" @click="setdata(1)">
				<view class="left">
					<view class="title">
						字数设置
					</view>
					<view class="txt" >
					</view>
				</view>
				<view class="cenbox">
					<scroll-view scroll-x="true" class="qianbox" style="font-size: 12px;color:#999;">
						{{info.word_count?info.word_count:'请选择'}}
					</scroll-view>
				</view>
				<image :src="'/images/rarr.png' | formatImgUrl" class="rarr" mode=""></image>
			</view> -->
		</view>
		
		<view class="top-title">
			展示设置
		</view>
		<view class="baibox">
			<view class="baili">
				<view class="zhan">
					图片水印显示
					<view class="bnt">
						您发布的图片类作品是否会带有您的水印
					</view>
				</view>
				<u-switch :inactiveValue="1"
					:activeValue="0" inactiveColor="#888EB6" size="20" activeColor="#45C4B0"
					></u-switch>
			</view>
			<view class="baili" @tap="showAge=true">
				<view class="zhan">
					笔龄设置
					<view class="bnt">
						填写后将在您的个人主页展示
					</view>
				</view>
				<view class="cenbox">
					<scroll-view scroll-x="true" class="qianbox" style="font-size: 12px;color:#999;width: auto;">
						{{info.pen_age || '0.00'}} 年
					</scroll-view>
				</view>
				<image :src="'/images/rarr.png' | formatImgUrl" class="rarr" mode=""></image>
			</view>
		</view>

		<u-popup :show="show" mode="center" @close="close" @open="open">
			<view class="mask">
				<view class="jatitle" v-if="type==0">
					价格设置
				</view>
			
			<input v-if="type==0" type="number" class="japut" placeholder="请输入最低价格(币)"
				v-model="info.min_price">
				
			<input v-if="type==0" type="number" class="japut" placeholder="请输入最高价格(币s)"
				v-model="info.max_price">	
					
					
				<view class="jatitle" v-if="type==1">
					字数设置
				</view>
				<picker v-if="type==1" class="japut" @change="bindPickerChange" :value="index" :range="array">
					{{array[index]}}
				</picker>
				<view class="qubox">
					<view class="quli" @click="show = false">
						取消
					</view>
					<view class="que" @click="setting">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="showAge" mode="center">
			<view class="mask">
				<view class="jatitle">
					笔龄设置
				</view>
			
			<input type="number" class="japut" placeholder="请输入笔龄" v-model="info.pen_age">	

				<view class="qubox">
					<view class="quli" @click="showAge = false">
						取消
					</view>
					<view class="que" @click="showAge = false,setting()">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 选择弹窗 -->
		<u-popup :show="showFee" mode="center" @close="showFee=false">
			<view class="custom-bot2" >
				<view class="title">
					展示价格
				</view>
				<view class="display-flex show-box">
					<view class="inp-box display-flex">
						<input type="text" placeholder="请输入最低价格" v-model="info.min_price"/>
						<text>币</text>
					</view>
					<view class="display-flex" style="margin: 0 15px;">
						—
					</view>
					<view class="inp-box display-flex">
						<input type="text" placeholder="请输入最高价格" v-model="info.max_price"/>
						<text>币</text>
					</view>
					<picker-view :value="fees" @change="bindPickerChange" class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in array" :key="index">{{item}}</view>
						</picker-view-column>
					</picker-view>
				</view>
		
				<view class="marginBorder"></view>
				<view class="btn" @tap="showFee=false,setting()">
					确认选择
				</view>
			</view>
		</u-popup>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				type:0,
				// 字数
				array: this.$db.get('config').word_count_label,
				index: 0,
				// 开关
				value: false,
				// 弹框
				show: false,
				userInfo: {},
				info:null,
				showFee: false,
				fees: [0],
				showAge: false
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			
			setdata(type){
				this.type = type;
				this.show= true;
			},
			setting() {
				var that = this
			
				if(!this.info.min_price || this.info.min_price==0 
				||
				 !this.info.max_price  || this.info.max_price==0){
					this.$common.errorToShow('请输入价格', () => {
						 
					}, 1500)
					return;
				}
		
				let min = parseInt(this.info.min_price);
				let max = parseInt(this.info.max_price)
				
				if(min > max){
					this.$common.errorToShow('最低金额不能高于最高金额', () => {
						 
					}, 1200)
					return;
				}
				
				if(min == max){
					this.info.word_price =  min
				}else{
					this.info.word_price = min + "-" + max
				}
				
				
				var prams = {
					// min_price: this.info.min_price,
					// max_price: this.info.max_price,
					word_price: this.info.word_price,
					word_count: this.info.word_count,
					pen_age: this.info.pen_age
				}
				

				this.$api.default.request('Writer/writeSet', prams).then((res) => {
					if (res.code == 1) {
						that.$common.successToShow(res.msg, () => {
							that.show = false
							that.getUserInfo();
						})
					}
				})

			},
			submit(show = false) {
				var that = this
				var prams = {
					order_receiving_status: this.info.order_receiving_status,
				}

				if (!this.info.hasOwnProperty('uid')) {
					prams['uid'] = this.info.uid
				}

				this.$api.default.request('good/list', {
					page: 1
				}).then((res) => {
					if (res.code) {
						if (res.data.total) {
							that.$api.default.request('user/saveWriterUserConfig', prams).then((res) => {
								if (res.code == 1) {
									that.$common.successToShow(res.msg, () => {
										if (show) {
											uni.navigateBack()
										}
									})
								} else {
									that.$common.errorToShow(res.msg, () => {
										that.info.order_receiving_status = 0
									})
								}
							})
						} else {
							that.$common.errorToShow('请先上传橱窗商品', () => {
								that.info.order_receiving_status = 0
							})
						}
					}
				})
			},
			getUserInfo() {
				
				this.$api.default.request('user/get_rule_dea', {}, 'POST', false).then((res) => {
					if (res.code) {
						this.info = res.data
					}
				})
				// this.$api.default.request('user/userInfo', {}, 'POST', false).then((res) => {
				// 	if (res.code) {
				// 		this.userInfo = res.user

				// 		this.info.word_count = this.info.word_count ?
				// 			this.info.word_count : this.array[0]
				// 		this.array.forEach((item, index) => {
				// 			if (res.user.writer_user_config.word_count == item) {
				// 				this.index = index
				// 			}
				// 		})
				// 	}
				// })
			},
			change(e) {
				this.xuan = !this.xuan
				this.submit()
			},
			// 弹框
			open() {

			},
			close() {
				this.show = false
			},
			// 字数
			bindPickerChange: function(e) {
				this.index = e.detail.value[0]
				this.info.word_count = this.array[this.index]
			},
		}
	}
</script>

<style lang="scss">
	.custom-bot2 {
		background-color: #FFFFFF;
		width: 600rpx;
		border-radius: 10px;
		text-align: center;
		
		.title{
			padding: 20px 0;
			font-family: '思源黑体';
			font-size: 14px;
			font-weight: bold;
			color: #3D3D3D;
		}
		
		.show-box{
			justify-content: center;
		}
	
		.picker-view {
			margin-left: 75rpx;
			width: 100rpx;
			height: 200rpx;
		}
		
		.inp-box{
			height: 34px;
			line-height: 34px;
			width: 100rpx;
			border-top: 1px solid #eee;
			border-bottom: 1px solid #eee;
			color: #3D3D3D;
			font-family: '思源黑体';
			font-weight: bold;
			
			text{
				font-size: 15px;
			}
		}
		
		input{
			height: 34px;
			line-height: 34px;
			font-size: 15px;
		}
	
		.item {
			height: 34px;
			line-height: 34px;
			font-family: '思源黑体';
			font-size: 15px;
			font-weight: bold;
			color: #3D3D3D;
		}
		
		.marginBorder{
			width: 100%;
			height: 10px;
			background: #F2F5F2;
		}
		
		.btn{
			margin: 10px auto;
			width: 80%;
			height: 40px;
			line-height: 40px;
			border-radius: 8px;
			background: #45C4B0;
			font-family: '思源黑体';
			font-size: 16px;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
	
	page {
		background: rgba(242, 245, 242, 1);
	}

	.set-box {
		
		.top-title{
			padding: 10px 15px;
		}

		.baibox {
			background-color: #FFFFFF;
			padding: 0 15px;

			.baili:last-child {
				border-bottom: none;
			}

			.baili {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 120rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);

				.zhan {
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
					
					.bnt{
						color: #999;
						font-size: 11px;
						font-weight: 500;
					}	
				}

				.left {
					flex-shrink: 0;

					.title {
						font-size: 28rpx;
						font-weight: bold;
						letter-spacing: 0em;
						color: #3D3D3D;
						padding-bottom: 10rpx;
						
						span {
							color: red;
							margin-left: 7rpx
						}
					}

					.txt {
						font-size: 24rpx;
						font-weight: normal;
						letter-spacing: 0em;
						color: #3D3D3D;
					}
				}

				.centxt {
					font-size: 28rpx;
					font-weight: normal;
					text-align: right;
					letter-spacing: 0em;
					color: #999999;
					width: 440rpx;
				}

				.cenbox {
					flex-grow: 1;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.headpic {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}

					.centxt {
						font-size: 28rpx;
						font-weight: normal;
						text-align: right;
						letter-spacing: 0em;
						color: #999999;
						width: 440rpx;
					}

					.qianbox {
						text-align: right;
						width: 450rpx;
						white-space: nowrap;

						.qli {
							background: rgba(153, 153, 153, 0.102);
							padding: 2px 8px 2px 6px;
							border-radius: 89px;
							font-family: 思源黑体;
							font-size: 12px;
							// font-weight: bold;
							color: #999;
							display: inline-block;
						}

						.qli:not(:first-child) {
							margin-left: 16rpx;
						}
					}
				}

				.rarr {
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 0;
				}
			}
		}

		.ti {
			width: 630rpx;
			height: 86rpx;
			border-radius: 8px;
			line-height: 86rpx;
			margin: 0 auto;
			opacity: 1;
			background: #45C4B0;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			letter-spacing: 0em;
			color: #FFFFFF;
		}

		.mask {
			background-color: #FFFFFF;
			width: 500rpx;
			border-radius: 10px;
			padding: 30rpx;

			.jatitle {
				font-size: 28rpx;
				font-weight: bold;
				padding-bottom: 20rpx;
			}

			.japut {
				border-bottom: 1px solid #f2f2f2;
				font-size: 24rpx;
				color: #3D3D3D;
				padding-bottom: 15rpx;
				margin-bottom: 30rpx;
			}

			.qubox {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.quli {
					border-radius: 8px;
					border: 1px solid #eeeeee;
					font-size: 24rpx;
					color: #999999;
					width: 220rpx;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
				}

				.que {
					border-radius: 8px;
					border: 1px solid #45C4B0;
					background-color: #45C4B0;
					font-size: 24rpx;
					color: #ffffff;
					text-align: center;
					width: 220rpx;
					height: 60rpx;
					line-height: 60rpx;
				}
			}
		}
	}
</style>